<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <span>银行卡管理</span>
      </p>
      <ul class="u2">
        <li v-for="(item , index) in list">
          <div class="card">
            <p class="p1">
              <span class="left">卡号/账号</span>
              <span class="right">储蓄卡</span>
            </p>
            <p class="p2">
              <span v-for="(cur , curIndex) in item.newBankNum">{{cur}}</span>
            </p>
            <p class="p3">持卡人姓名</p>
            <p class="p4">
              <span class="left">{{item.username}}</span>
              <span class="right">{{item.bank_name}}</span>
            </p>
          </div>
          <p class="unbind">
            <span @click="unbind(item)">解绑</span>
          </p>
        </li>
        <li class="addCard">
          <router-link to="/addBank" class="addBox">
            <p class="p1">
              <img src="../common/imgs/addBankCard.png" alt="">
            </p>
            <p class="p2">添加银行卡</p>
          </router-link>
        </li>
        <li class="clear"></li>
      </ul>
    </section>
    <confirm-dialog ref="unbindRef" cfTitle="解绑银行卡" msg="您确定要解绑银行卡吗？" @confirm="confirmUnbind"/>
  </div>
</template>
<script>
  import {getBindBanks , delBank } from '../http/api'
  import ConfirmDialog from "../components/ConfirmDialog";
  export default {
    name : 'bankCardManage',
    components: {ConfirmDialog},
    data(){
      return{
        list : [],
        unbindItem : null,
      }
    },
    comments:{
      ConfirmDialog : resolve => require(['../components/ConfirmDialog'] , resolve),
    },
    mounted() {
      this.loadPage();
    },
    methods:{
      loadPage(){
        getBindBanks().then(res => {
          if(res.code == 200){
            let list = res.data.list;
            this.for(list , (item , index) => {
              let arr = [];
              let bank_card_num = item.bank_card_num;
              let leftEight = bank_card_num.substring(0,8);
              arr.push(leftEight.substring(0,4) , leftEight.substring(leftEight.length - 4));
              arr.push('****');
              arr.push(bank_card_num.substring(bank_card_num.length -4));
              item.newBankNum = arr;
            });
            this.list =list;
          }
        });
      },
      unbind(item){
        this.unbindItem = item;
        this.$refs.unbindRef.dialogShow();
      },
      confirmUnbind(){
        let unbindItem = this.unbindItem;
        delBank({bank_id : unbindItem.id}).then( res => {
          if(res.code == 200){
            require('../common/js/toast').toast('操作成功');
            this.loadPage();
          }
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    min-height: 725px;
    >.guide{
      >span{
        font-size: 24px;
      }
    }
    >.u2{
      padding-top: 29px;
      li{
        height: 234px;width:389px;display: inline-block;float: left;margin-top: 10px;margin-left: 36px;position: relative;
        &:hover{
          cursor: pointer;
        }
        &:nth-child(2n+1){
          margin-left: 0;
        }
        >.card{
          height: 190px;.borderRadius;padding: 19px 31px;padding-bottom: 0;background: url("../common/imgs/bankBg.png") center center no-repeat;background-size: 100% 100%;
          font-family: 'MicrosoftYaHei';
          >.p1{
            overflow: hidden;
            >.left{
              text-align: left;color: rgba(255, 255, 255, 0.64);line-height: 27px;height: 27px;
            }
            >.right{
              display: inline-block;width: 85px;height: 27px;background: url("../common/imgs/cardTypeBg.png") center center no-repeat;background-size: 100% 100%;
              color: #fff;line-height: 27px;font-size: 14px;float: right;padding-left: 24px;
            }
          }
          >.p2{
            text-align: right;font-size: 24px;color: #fff;padding-top: 20px;overflow: hidden;
            >span{
              display: inline-block;width: 25%;text-align: center;
              &:first-child{
                text-align: left;
              }
              &:last-child{
                text-align: right;
              }
            }
          }
          >.p3{
            text-align: left;font-size: 12px;padding-top: 46px;color: rgba(255, 255, 255, 0.51);
          }
          >.p4{
            padding-top: 9px;overflow: hidden;color: #fff;
            >.left{
              font-size: 12px;float: left;
            }
            >.right{
              font-size: 12px;float: right;
            }
          }
        }
        >.unbind{
          position: absolute;z-index: 1;bottom: 0;left: 0;width: 100%;text-align: center;display: none;padding-bottom: 5px;
          >span{
            color: #F62929;font-size: 16px;
            &:hover{
              cursor: pointer;
            }
          }
        }
        &:hover{
          >.card{
            box-shadow: 0px 0px 20px #d4d4d4;
          }
          >.unbind{
            display: block;
          }
        }
      }
      >li.clear{
        clear: both;float: none;height: 0;width: 100%;
      }
      >li.addCard{
        text-align: center;
        >.addBox{
          height: 190px;.borderRadius;padding: 0;font-family: 'MicrosoftYaHei';
          border: 1px dashed #E5E5E5;background: none;display: block;
          >.p1{
            padding-top: 55px;
            img{
              width: 35px;
            }
          }
          >.p2{
            font-size: 14px;color: #262626;padding-top: 17px;
          }
        }
      }
    }
  }
</style>
